<template>
    <!-- 新增编辑布局 -->
    <div class="layout">
        <a-layout class="layout-container">
            <a-layout-header>
                <div class="icon-wrapper" >
                    <div style="display: flex;align-items: center;cursor: pointer;" >
                        <dh-icon :size="20" name="return" :title="$t('attendance.common.back')" @click="back" />
                        <span class="back-text">{{$t(title)||$t('attendance.common.back')}}</span>
                        <span class="title-desc" v-if="titleDesc">
                            <info-circle-filled class="title-icon" />{{$t(titleDesc)}}
                        </span>
                    </div>
                    <div>
                        <slot name="headerRight"></slot>
                    </div>
                </div>
            </a-layout-header>
            <a-layout-content>
                <div class="scroll-container">
                    <slot name="content"></slot>
                    <div class="footer">
                        <div class="operate-default" v-if="showOperate" :style="{'padding-left': leftWidth + 'px'}">
                            <a-button :disabled="okDisabled" type="primary" @click="emit('save')">{{$t('attendance.common.ok')}}</a-button>
                            <a-button @click="back()">{{$t('attendance.common.cancel')}}</a-button>
                        </div>
                        <div class="operate" :style="{'padding-left': leftWidth + 'px'}">
                            <slot name="operate" :back="back"></slot>
                        </div>
                    </div>
                </div>
            </a-layout-content>
        </a-layout>
        <at-cancel-modal
            ref="modalCancel"
            @onCancel="onCancel()"
            :title="$t('attendance.common.tip')"
        >
            <template v-slot>
                <div style="margin-top:10px"><dh-icon name="alarm" size="20px"/>
                    <span style="margin-left:10px">{{$t('attendance.location.cancelAddTip')}}</span>
                </div>
            </template>
        </at-cancel-modal>
    </div>
</template>

<script setup lang="ts">
import ScrollbarContainer from "@/attendanceComponents/atScrollbar/index.vue";
import atCancelModal from "@/attendanceComponents/atCancelModal/index.vue"
import {useRouter} from 'vue-router'
import { InfoCircleFilled } from '@ant-design/icons-vue'

const slots = useSlots();

const  router = useRouter();

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    leftWidth: {
        type: Number,
        default: 150
    },
    isPopModal: {
        type: Boolean,
        default: true
    },
    titleDesc:{
        type: String,
        default: ''
    },
    okDisabled: {
        type: Boolean,
        default: false
    },
    backRouter: {
        type: Object,
        default: null
    }
})
const emit = defineEmits(['save']);

const modalCancel = ref<{showDelModal: Function} | null>(null)
const back = () => {
    if(props.isPopModal){
        modalCancel.value?.showDelModal()
    }
    else{
        onCancel();
    }
}
const onCancel = () => {
    if(props.backRouter && props.backRouter.path){
        router.push({...props.backRouter})
    }
    else{
        router.go(-1);
    }
}
const showOperate = computed(() => {
    return !slots.operate;
})
</script>

<style lang="less" scoped>
.layout{
    height: 100%;
    min-width: 1280px;
    box-sizing: border-box;
    &-container{
        height: 100%;
        .ant-layout-header{
            position: relative;
            background-color: var(--block);
            padding: 0;
            height: calc(var(--font-size-page-title ) + 2 * var(--spacing-frame-around));
            line-height: var(--font-size-page-title);
            padding: var(--spacing-frame-around);
            box-shadow: 0 0 6px 0 rgba(0, 0, 0,.16);
            .icon-wrapper{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .back-text {
                    font-size: var(--font-size-page-title);
                    padding-left: var(--spacing-frame-around);
                    line-height: var(--line-height-base);
                    font-weight: 700;
                    display: inline-block;
                    margin: 0;
                }

                .title-desc{
                    margin-bottom: -10px;
                    font-size: var(--font-size-base);
                    color: var(--font-s);
                    font-weight: var(--font-size-weight-normal);
                    margin-left: var(--spacing-frame-around-map);
                    line-height: var(--spacing-frame-around-map);
                    .title-icon{
                        margin-right: 3px;
                        color: var(--font-s);
                    }
                }
            }
        }
        .ant-layout-content{
            overflow: overlay;
            padding: var(--spacing-frame-around);
            .scroll-container{
                min-height: 100%;
                text-align: left;
                border-radius: var(--border-radius);
                background-color: var(--block);
                padding: var(--spacing-modular-details);
            }
            .footer{
                height: 57px;
                // padding: 12px var(--spacing-modular-details);
            }
        }
        .ant-layout-footer{
            height: 57px;
            background: var(--bg-card);
            border-top: 1px solid var(--split);
            padding: 12px calc(var(--spacing-frame-around) + 2 * var(--spacing-modular-details));
        }
        .operate, .operate-default{
            text-align: left;
            :deep(button:first-child) {
                margin-right: var(--spacing-atom-broadwise-button)
            }
            :deep(button:nth-child(2)){
                margin-right: var(--spacing-atom-broadwise-button)
            }
        }
    }
    ::-webkit-scrollbar{
        height: 12px;
        width: 12px;
    }

    ::-webkit-scrollbar-thumb {
        border-style: dashed;
        border-color: transparent;
        background-color: rgba(157, 165, 183, 0.4);
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(157, 165, 183, 0.6);
    }
}
</style>